<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教程</title>
    @@include('./common/link.html')
    <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.4.1/styles/vs.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.1/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8"
        src="https://g.alicdn.com/de/prismplayer/2.9.1/aliplayer-min.js"></script>
    <link rel="stylesheet" href="./css/pageTutorial.css">
</head>

<body>
    @@include('./common/header.html', {
    isCollapse: true
    })
    @@include('./common/navigation.html')
    <script src="./js/tutorial.js"></script>
    <!-- 内容 -->
    <div class="container main">
        <!-- 中间 -->
        <div class="row">
            <div class="col left-column">
                <div class="tab">HTML 教程</div>
                <div class="sidebar-box gallery-list">
                    <div class="design" id="leftcolumn">
                        <a class="gallery-list-item actived" title="HTML 教程" href="./tutorial.html">
                            HTML 教程 </a>
                        <a class="gallery-list-item" title="HTML 字符实体" href="./tutorial.html">
                            HTML 字符实体 </a>
                        <a class="gallery-list-item" title="HTML URL" href="./tutorial.html">
                            HTML URL </a>
                        <br>
                        <h2 class="left"><span class="left_h2">HTML5</span></h2> <a class="gallery-list-item"
                            title="HTML5 教程" href="./tutorial.html">
                            HTML5 教程 </a>
                        <a class="gallery-list-item" title="HTML5 浏览器支持" href="./tutorial.html"> HTML5 浏览器支持 </a> <a
                            target="_top" title="HTML5 新元素" href="./tutorial.html">
                            HTML5 新元素 </a>
                        <a class="gallery-list-item" title="HTML5 Canvas" href="./tutorial.html">
                            HTML5 Canvas </a>
                        <a class="gallery-list-item" title="HTML5 内联 SVG" href="./tutorial.html">
                            HTML5 内联 SVG </a>
                        <br>
                        <h2 class="left"><span class="left_h2">HTML</span> 媒体</h2> <a target="_top"
                            title="HTML 媒体(Media)" href="./tutorial.html">
                            HTML 媒体(Media) </a>
                        <a class="gallery-list-item" title="HTML 插件" href="./tutorial.html">
                            HTML 插件 </a>
                        <a class="gallery-list-item" title="HTML 音频(Audio)" href="./tutorial.html">
                            HTML 音频(Audio) </a>
                        <br>
                        <h2 class="left"><span class="left_h2">HTML</span> 参考手册</h2>
                        <a class="gallery-list-item" href="./tutorial.html">
                            HTML 标签列表(字母排序) </a>
                        <a class="gallery-list-item" href="./tutorial.html">
                            HTML 标签列表（功能排序） </a>
                        <a class="gallery-list-item" href="./tutorial.html">
                            HTML 属性 </a>
                    </div>
                </div>
            </div>
            <!---->
            <div class="col middle-column">
                <div class="article">
                    <div class="previous-next-links">
                        <div class="previous-design-link" style="display: none;"> </div>
                        <div class="next-design-link"><a href="https://www.runoob.com/html/html-intro.html" rel="next"
                                title="HTML 简介">HTML 简介</a> <a href="https://www.runoob.com/html/html-intro.html"><i
                                    style="font-size:16px;" class="fa fa-arrow-right" aria-hidden="true"></i></a></div>
                    </div>
                    <div class="article-body">
                        <div class="article-intro" id="content">

                            <h1>HTML 教程- <span class="color_h1">(HTML5 标准)</span></h1>
                            <div class="tutintro">
                                <p>
                                    超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。</p>
                                <p>您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。</p>
                                <p>在本教程中，您将学习如何使用 HTML 来创建站点。</p>
                                <p>HTML 很容易学习！相信您能很快学会它！</p>
                            </div>

                            <h2 class="tutheader">HTML 实例</h2>
                            <p>本教程包含了数百个 HTML 实例。</p>
                            <p>使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。</p>

                            <blockquote>
                                <p><strong>注意：</strong>对于中文网页需要使用 <strong>&lt;meta charset="utf-8"&gt;</strong>
                                    声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <strong>&lt;meta
                                        charset="gbk"&gt;。</strong></p>
                            </blockquote>

                            <div class="example">
                                <h2 class="example">实例</h2>
                                <div class="example_code">
                                    <pre>&lt;!DOCTYPE html&gt;
&lt;title&gt;Title&lt;/title&gt;
&lt;style&gt;body {width: 500px;}&lt;/style&gt;
&lt;script type=&quot;application/javascript&quot;&gt;
    function $init() {return true;}
&lt;/script&gt;
&lt;body&gt;
    &lt;p checked class=&quot;title&quot; id=&#39;title&#39;&gt;Title&lt;/p&gt;
    &lt;!-- here goes the rest of the page --&gt;
&lt;/body&gt;</pre>
                                </div>
                                <br>
                                <a target="_blank" href="./codeRun.html" class="tryitbtn"
                                    rel="noopener noreferrer">尝试一下 »</a>
                                <p>点击 "尝试一下" 按钮查看在线实例</p>
                            </div>
                            <div class="btn_open_more_wrap">
                                <p id="btnOpenMore" class="btn_open_more">点击购买,阅读全文</p>
                            </div>
                        </div>
                    </div>

                    <div class="previous-next-links">
                        <div class="previous-design-link" style="display: none;"> </div>
                        <div class="next-design-link"><a href="https://www.runoob.com/html/html-intro.html" rel="next"
                                title="HTML 简介">HTML 简介</a> <a href="https://www.runoob.com/html/html-intro.html"><i
                                    style="font-size:16px;" class="fa fa-arrow-right" aria-hidden="true"></i></a></div>
                    </div>
                </div>
            </div>

            <div class="fivecol last right-column">

                <style>
                    .sidebar-tree .double-li {
                        width: 300px;
                    }
                    .sidebar-tree .double-li li {
                        width: 44%;
                        line-height: 1.5em;
                        border-bottom: 1px solid #ccc;
                        float: left;
                        display: inline;
                    }
                </style>


                <div class="sidebar-box re-box re-box-large">
                    <div class="sidebar-box recommend-here" style="margin: 0 auto;">
                        <a href="javascript:void(0);" style="font-size: 16px; color:#409EFF;font-weight:bold;"> <i
                                class="fa fa-list" aria-hidden="true"></i> 分类导航</a>
                    </div>
                    <div class="sidebar-box sidebar-cate">

                        <div class="sidebar-tree">
                            <ul>
                                <li style="margin: 0;" class=""><a href="javascript:void(0);" class="tit"> HTML /
                                        CSS</a>
                                    <ul class="double-li" style="display: none;">
                                        <li><a title="HTML 教程" href="./tutorial.html">HTML
                                                教程</a></li>
                                        <li><a title="HTML5 教程" href="./tutorial.html">HTML5
                                                教程</a></li>
                                        <li><a title="CSS 教程" href="./tutorial.html">CSS 教程</a>
                                        </li>
                                        <li><a title="CSS3 教程" href="./tutorial.html">CSS3
                                                教程</a></li>
                                        <li><a title="Bootstrap3 教程"
                                                href="./tutorial.html">Bootstrap3
                                                教程</a></li>
                                        <li><a title="Bootstrap4 教程"
                                                href="./tutorial.html">Bootstrap4
                                                教程</a></li>
                                        <li><a title="Font Awesome 教程"
                                                href="./tutorial.html">Font
                                                Awesome 教程</a></li>
                                        <li><a title="Foundation 教程"
                                                href="./tutorial.html">Foundation
                                                教程</a></li>
                                    </ul>
                                </li>
                                <li style="margin: 0;"><a href="javascript:void(0);" class="tit"> JavaScript</a>
                                    <ul class="double-li">
                                        <li><a title="JavaScript 教程"
                                                href="./tutorial.html">JavaScript 教程</a></li>
                                        <li><a title="HTML DOM 教程"
                                                href="./tutorial.html">HTML DOM 教程</a>
                                        </li>
                                        <li><a title="jQuery 教程"
                                                href="./tutorial.html">jQuery 教程</a></li>
                                        <li><a title="AngularJS 教程"
                                                href="./tutorial.html">AngularJS
                                                教程</a></li>
                                        <li><a title="AngularJS2 教程"
                                                href="./tutorial.html">AngularJS2
                                                教程</a></li>
                                        <li><a title="Vue.js 教程" href="./tutorial.html">Vue.js
                                                教程</a></li>
                                        <li><a title="React 教程" href="./tutorial.html">React
                                                教程</a></li>
                                        <li><a title="TypeScript 教程"
                                                href="./tutorial.html">TypeScript 教程</a>
                                        </li>
                                        <li><a title="jQuery UI 教程"
                                                href="./tutorial.html">jQuery UI 教程</a>
                                        </li>
                                        <li><a title="jQuery EasyUI 教程"
                                                href="./tutorial.html">jQuery EasyUI
                                                教程</a></li>
                                        <li><a title="Node.js 教程"
                                                href="./tutorial.html">Node.js 教程</a></li>
                                        <li><a title="AJAX 教程" href="./tutorial.html">AJAX
                                                教程</a></li>
                                        <li><a title="JSON 教程" href="./tutorial.html">JSON
                                                教程</a></li>
                                        <li><a title="Echarts 教程"
                                                href="./tutorial.html">Echarts 教程</a>
                                        </li>
                                        <li><a title="Highcharts 教程"
                                                href="./tutorial.html">Highcharts
                                                教程</a></li>
                                        <li><a title="Google 地图 教程"
                                                href="./tutorial.html">Google 地图
                                                教程</a></li>
                                    </ul>
                                </li>
                                <li style="margin: 0;"><a href="javascript:void(0);" class="tit"> 服务端</a>
                                    <ul class="double-li">
                                        <li><a title="Python 教程"
                                                href="./tutorial.html">Python 教程</a></li>
                                        <li><a title="Python2.x 教程"
                                                href="./tutorial.html">Python2.x 教程</a>
                                        </li>
                                        <li><a title="Linux 教程" href="./tutorial.html">Linux
                                                教程</a></li>
                                        <li><a title="Docker 教程"
                                                href="./tutorial.html">Docker 教程</a></li>
                                        <li><a title="Ruby 教程" href="./tutorial.html">Ruby
                                                教程</a></li>
                                        <li><a title="Java 教程" href="./tutorial.html">Java
                                                教程</a></li>
                                        <li><a title="C 教程" href="./tutorial.html">C 教程</a></li>
                                        <li><a title="C++ 教程" href="./tutorial.html">C++
                                                教程</a></li>
                                        <li><a title="Perl 教程" href="./tutorial.html">Perl
                                                教程</a></li>
                                        <li><a title="Servlet 教程"
                                                href="./tutorial.html">Servlet 教程</a>
                                        </li>
                                        <li><a title="JSP 教程" href="./tutorial.html">JSP 教程</a>
                                        </li>
                                        <li><a title="Lua 教程" href="./tutorial.html">Lua 教程</a>
                                        </li>
                                        <li><a title="Rust 教程" href="./tutorial.html">Rust
                                                教程</a></li>
                                        <li><a title="R 教程" href="./tutorial.html">R 教程</a></li>
                                        <li><a title="Scala 教程" href="./tutorial.html">Scala
                                                教程</a></li>
                                        <li><a title="Go 教程" href="./tutorial.html">Go 教程</a></li>
                                        <li><a title="PHP 教程" href="./tutorial.html">PHP 教程</a>
                                        </li>
                                        <li><a title="Django 教程"
                                                href="./tutorial.html">Django 教程</a></li>
                                        <li><a title="Zookeeper 教程"
                                                href="./tutorial.html">Zookeeper 教程</a>
                                        </li>
                                        <li><a title="设计模式"
                                                href="./tutorial.html">设计模式</a>
                                        </li>
                                        <li><a title="正则表达式"
                                                href="./tutorial.html">正则表达式</a></li>
                                        <li><a title="Maven 教程" href="./tutorial.html">Maven
                                                教程</a></li>
                                        <li><a title="NumPy 教程" href="./tutorial.html">NumPy
                                                教程</a></li>
                                        <li><a title="Verilog 教程"
                                                href="./tutorial.html">Verilog 教程</a>
                                        </li>
                                        <li><a title="ASP 教程" href="./tutorial.html">ASP 教程</a>
                                        </li>
                                        <li><a title="AppML 教程" href="./tutorial.html">AppML
                                                教程</a></li>
                                        <li><a title="VBScript 教程"
                                                href="./tutorial.html">VBScript 教程</a>
                                        </li>
                                    </ul>
                                </li>
                                <li style="margin: 0;" class=""><a href="javascript:void(0);" class="tit"> 数据库</a>
                                    <ul class="double-li" style="display: none;">
                                        <li><a title="SQL 教程" href="./tutorial.html">SQL 教程</a>
                                        </li>
                                        <li><a title="Mysql 教程" href="./tutorial.html">Mysql
                                                教程</a></li>
                                        <li><a title="PostgreSQL 教程"
                                                href="./tutorial.html">PostgreSQL
                                                教程</a></li>
                                        <li><a title="SQLite 教程"
                                                href="./tutorial.html">SQLite 教程</a></li>
                                        <li><a title="MongoDB 教程"
                                                href="./tutorial.html">MongoDB 教程</a>
                                        </li>
                                        <li><a title="Redis 教程" href="./tutorial.html">Redis
                                                教程</a></li>
                                        <li><a title="Memcached 教程"
                                                href="./tutorial.html">Memcached
                                                教程</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>



            </div>
        </div>
    </div>
    @@include('./common/footer.html',{
        hasBlock: true
    })
    @@include('./common/fixBtn.html')
</body>

</html>